<template>
  <div>
    <h1>今年的年龄 - {{ age }}</h1>
    <h1>明年的年龄 - {{ plusOne }}</h1>
    <h1>后年的年龄 - <input type="text" v-model.number.lazy="plusTwo"></h1>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';

/**
 * 今年的年龄 
 * 明年的年龄 - 简写的计算属性
 *  computed函数 参数是回调函数
 *  回调函数的返回值 自己的业务处理，基于一个依赖项计算
 * 后年的年龄 - input框 练完整写法
 *  computed函数 参数是个对象
 *  对象里有2个属性
 *    get函数 返回值 自己的业务处理，基于一个依赖项计算
 *    set函数 参数是你修改的值，内部实现也是和你的业务逻辑相关
 */
const age = ref(18)
const plusOne = computed(() => age.value + 1)
const plusTwo = computed({
  get: () => age.value + 2,
  set: val => {
    // val是我们设置后年的年龄
    // 今年的年龄 是 后年的年龄 -2
    age.value = val - 2
  }
})
</script>

<style lang="scss" scoped>

</style>